import React,{useState,useEffect} from 'react'
import { Button, Checkbox,Select,Space, Form, Input,message } from 'antd';
import $axios,{ImgUrl}  from '../../../utils/axios';
import UpLoadImg from '../item/UpLoadImg';
import ServiceCart from '../item/ServiceCart';

export default function AddTeam(props:any) {
    const [Organ,setOrgan]=useState<any[]>([])
    const [tags,setTags]=useState<any[]>([])
    const [ServicePack,setServicePack]=useState<any[]>([])
    const [picture,setPicture]=useState<any>()
    useEffect(()=>{
        getTableData()
        getLabelBySearchPage()
        getServiceLabelItem()
    },[])
      // 获取机构数据
    const getTableData =()=>{
        $axios({
        url:'/api/getAllChcsOrgan',
        method:'post',
        }).then((res:any)=>{
        console.log(res.data.rows);
        
        setOrgan([...res.data.rows])
        })
    }
    // 查询标签信息
    const getLabelBySearchPage =()=>{
        $axios({
        url:'/api/getLabelBySearchPage',
        method:'post',
        }).then((res:any)=>{
        console.log(res.data);
        if(res.data.re.length>0){
            setTags([...res.data.re])
        }

    
        })
    }
      // 查询所有服务包以及对应标签以及服务项信息
    const getServiceLabelItem=()=>{
        $axios({
        url:'/api/getServiceLabelItem',
        method:'post',
        }).then((res:any)=>{
        console.log(res);
        let newData =[] as any
        res.data.map((item:any,index:number)=>{
            let obj = {
            id:item.id,
            title:item.name,
            text:item.targetAudience,
            imgurl:ImgUrl+item.picture,
            labelArr:item.labelArr
            }
            newData.push(obj)
        })
        setServicePack(newData)

        })
    }
    // 提交
    // 获取图片
    const getuploadVal=(value:any)=>{
        setPicture("public/upload/u5598.png")
    }
    const onFinish = (values: any) => {
        values.picture = "public/upload/u5598.png"
        addTeam(values)
        // console.log('Success:', values);
    };
    const addTeam=(value:any)=>{
        $axios({
          url:'/api/saveTeam',
          method:'post',
          data:{
            name:value.name,
            picture:value.picture,
            organId:value.organId,
            labelIdStr:JSON.stringify(value.labelIdStr)
          }
        }).then((res:any)=>{
          console.log(res);
          if(res.code==200){
            message.success('新增团队成功');
            back()
          }else{
            message.error('新增团队失败');
          }
        })
      }
    //   返回
    const back=()=>{
        props.back()
    }
  return (
    <div>
        <div style={{borderLeft:'4px solid #2984F8',padding:'10px',marginBottom:'10px',borderBottom:'1px solid #f2f7fb',margin:'0 0 20px 0'}}>
            <h3>新增团队信息</h3>
        </div>
        <Form
            name="basic"
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 16 }}
            // style={{ maxWidth: 1200 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            autoComplete="off"
        >
            <Form.Item
            label="团队名称"
            name="name"
            rules={[{ required: true, message: '请输入团队名称' }]}
            >
                <Input  style={{ width: '400px' }}/>
            </Form.Item>

            <Form.Item
            label="所属机构"
            name="organId"
            rules={[{ required: true, message: '请选择所属机构' }]}
            >
                <Select
                    fieldNames={{label:'name',value:'id'}}
                    options={Organ}
                    style={{ width: '400px' }}
                    />
            </Form.Item>
            
            <Form.Item
            label="团队标签"
            name="labelIdStr"
            rules={[{ required: true, message: '请选择团队标签' }]}>
                    <Select
                    mode="multiple"
                    fieldNames={{label:'name',value:'id'}}
                    style={{ width: '400px' }}
                    allowClear
                    options={tags}
                    />
            </Form.Item>
            <Form.Item
            label="团队头像"
            name="picture"
            >
                <UpLoadImg uploadVal={getuploadVal}/>
            </Form.Item>
            <Form.Item
            label="服务包"
            name="picture"
           
            >
                <div  style={{display:'flex',flexWrap:'wrap'}}>
                {
                    ServicePack.length>0&& ServicePack.map((item:any,index:number)=>{
                        return <ServiceCart coloms={item} key={item.id+index} ></ServiceCart> 
                    })
                }
                </div>

            </Form.Item>
           

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Space>
                    <Button type="primary" htmlType="submit" size='large'>保存</Button>
                     <Button size='large' onClick={back}>返回</Button>
                </Space>
            
            </Form.Item>
        </Form>
    </div>
  )
}
